<template>
  <div class="match-list">
    <!-- 标题行 -->
    <div class="header">
      <div class="header-item header-time-league">时间/联赛</div>
      <div class="header-item header-progress">状态</div>
      <div class="header-item teams">比赛对阵</div>
      <div class="header-item full-score">全场</div>
      <div class="header-item half-score">半场</div>
      <div class="header-item corner">角球</div>
      <div class="header-item betting-info">指数</div>
      <div class="header-item icons">直播</div>
      <div class="header-item favorite">操作</div>
    </div>
    <!-- 比赛列表 -->
    <div class="list">
      <template v-for="(group, groupIndex) in groupedMatches" :key="groupIndex">
        <template v-if="group.matches.length > 0">
          <div class="group-header">{{ getGroupTitle(group.status) }}</div>
          <div
            v-for="(match, index) in group.matches"
            :key="match.id"
            class="match-item"
            :class="isSelected(match) && 'active'"
            @click="() => selectMatch(match, index)"
          >
            <div class="time-league">
              <div class="select" @click="(index) => handleSelect(index)">
                <img src="@/assets/icons/score/select.webp" class="active" />
                <img src="@/assets/icons/score/selected.webp" class="default" />
              </div>
              <div class="league-container">
                <div class="time">
                  {{ formatTime(match.matchTime) }}
                </div>
                <div class="league">{{ match.title }}</div>
              </div>
            </div>
            <div class="progress" :class="{ 'progress-red': match.status === 2 }">
              <span>
                {{ match.match_status_txt }}
              </span>
              <img src="@/assets/icons/score/minite.gif" v-show="match.status === 2" />
            </div>
            <div class="teams">
              <div class="team">
                <span class="team-name">{{ match.home_team_name }}</span>
                <span class="cards">
                  <span class="yellow-card" v-show="match?.corner && match?.corner[2] > 0">{{
                    match?.corner && match?.corner[2]
                  }}</span>
                  <span class="red-card" v-show="match?.corner && match?.corner[4] > 0">{{
                    match?.corner && match?.corner[4]
                  }}</span>
                </span>
              </div>
              <div class="team">
                <span class="team-name">{{ match.away_team_name }}</span>
                <span class="cards">
                  <span class="yellow-card" v-show="match?.corner && match?.corner[3] > 0">{{
                    match?.corner && match?.corner[3]
                  }}</span>
                  <span class="red-card" v-show="match?.corner && match?.corner[5] > 0">{{
                    match?.corner && match?.corner[5]
                  }}</span>
                </span>
              </div>
            </div>
            <div
              class="full-score item-full-score"
              :class="{ 'item-full-score-not': match.status === 1 }"
            >
              <div>{{ statusMatchScoreText(match.status, match?.home_grades) }}</div>
              <div>{{ statusMatchScoreText(match.status, match?.away_grades) }}</div>
            </div>
            <div class="half-score">
              <div>{{ statusMatchScoreText(match.status, match?.half_score[0]) }}</div>
              <div>{{ statusMatchScoreText(match.status, match?.half_score[1]) }}</div>
            </div>
            <div class="corner">
              <div>{{ statusMatchScoreText(match.status, match?.corner[0]) }}</div>
              <div>{{ statusMatchScoreText(match.status, match?.corner[1]) }}</div>
            </div>
            <div class="betting-info">
              <div class="index">
                <span v-for="(item, index) in match.w_1" :key="index">{{ item }}</span>
              </div>
              <div class="odds">
                <span
                  :class="{ up: match.odds1_change === 'up', down: match.odds1_change === 'down' }"
                  v-for="(item, index) in match.w_2"
                  :key="index"
                  >{{ item }}</span
                >
              </div>
            </div>
            <div class="icons">
              <img
                src="@/assets/icons/score/animation-active.webp"
                v-show="hasAnimationIcon(match)"
              />
              <img src="@/assets/icons/score/video-active.webp" v-show="hasVideoIcon(match)" />
              <!-- <img :src="match.anchor_pic" v-show="hasAvatarIcon(match)" class="avatar" /> -->
            </div>
            <div class="favorite">
              <img src="@/assets/icons/score/collect.webp" alt="收藏" />
            </div>
          </div>
        </template>
      </template>
    </div>

    <Legend />
  </div>
</template>

<script setup>
import Legend from './Legend.vue'
import VirtualList from 'vue3-virtual-scroll-list'
import { ref, watch, defineProps, defineEmits, computed } from 'vue'
import dayjs from 'dayjs'
const myProps = defineProps(['list', 'hasReset'])
const myEmit = defineEmits(['selectMatch'])
const selectIndex = ref(0)
const matches = ref([])
const selectedMatch = ref(null)

const groupedMatches = computed(() => {
  const groups = {
    inProgress: { status: 2, matches: [] },
    notStarted: { status: 1, matches: [] },
    finished: { status: 3, matches: [] }
  }

  matches.value.forEach((match) => {
    if (match.status === 2) {
      groups.inProgress.matches.push(match)
    } else if (match.status === 1) {
      groups.notStarted.matches.push(match)
    } else if (match.status === 3) {
      groups.finished.matches.push(match)
    } else {
      groups.finished.matches.push(match)
    }
  })

  return Object.values(groups).filter((group) => group.matches.length > 0)
})

const getGroupTitle = (status) => {
  switch (status) {
    case 1:
      return '未开始'
    case 2:
      return '进行中'
    case 3:
      return '已结束'
    default:
      return ''
  }
}

const isSelected = (match) => {
  return match.id === selectedMatch.value?.id
}

const selectMatch = (res, index) => {
  myEmit('selectMatch', res)
  // selectIndex.value = index
  selectedMatch.value = res

  //TODO 点击数据在这里 要把数据放到pinia中
  // console.log('selectMatch');
}

const handleSelect = (index) => {
  console.log(index, 'index')
}

watch(
  () => myProps.list,
  (newProps) => {
    matches.value = newProps
    // 当列表更新时,选中第一个比赛
    if (newProps.length > 0) {
      selectedMatch.value = newProps[0]
      myEmit('selectMatch', newProps[0])
    }
  },
  { immediate: true } // 确保在组件挂载时也会执行
)

watch(
  () => myProps.hasReset,
  (newProps) => {
    if (newProps) {
      // selectIndex.value = 0
      myEmit('selectMatch', myProps.list[0])
    }
  }
)

const formatTime = (num) => {
  return dayjs(num).format('HH:mm')
}

const status = (statusIndex) => {
  switch (statusIndex) {
    case 1:
      return ''
    case 2:
      return ''
    case 3:
      return ''
  }
}

const statusMatchScoreText = (statusIndex, score) => {
  switch (statusIndex) {
    case 1:
      return '-'
    case 2:
      return score
    case 3:
      return score
  }
}

const hasAnimationIcon = (res) => {
  // console.log(res, 'res')
  if (res.has_vid === 1) {
    return false
  } else if (res.has_anim === 1) {
    return true
  } else {
    return false
  }
}

const hasVideoIcon = (res) => {
  // console.log(res, 'res')
  if (res.has_vid === 1) {
    return true
  } else {
    return false
  }
}

const hasAvatarIcon = (res) => {
  // console.log(res, 'res')
  if (res.anchor_pic) {
    return true
  }
}
</script>

<style scoped lang="scss">
.match-list {
  width: 815px;
  border-radius: 10px;
  // overflow: hidden;
  // margin-right: 10px;
  background-color: #fff;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

.header {
  display: flex;
  //   background-color: #f5f5f5;
  //   padding: 10px 0;
  //   font-weight: bold;
  height: 53px;
  font-weight: 400;
  font-size: 14px;
  color: #000;
  align-items: center;
  background-color: #fff;
  position: sticky;
  top: 200px;
  z-index: 10;
  border-bottom: 1px solid #f0f0f0;
}

.header-item {
  text-align: center;
  font-weight: 400;
  font-size: 14px;
  color: #000;
}

.header-item.header-time-league {
  flex: 1.5;
}

.header-item.progress {
  flex: 0.5;
}

.header-item.teams {
  flex: 2;
}

.header-item.full-score,
.header-item.half-score,
.header-item.corner {
  flex: 0.4;
}

.header-item.betting-info {
  flex: 2;
}

.header-item.icons,
.header-item.favorite {
  flex: 0.5;
}
.header-progress {
  flex: 0.5;
}
.list {
  min-height: 100vh;
}

.match-item {
  display: flex;
  align-items: center;
  //   padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
  height: 46px;
  font-size: 12px;
  background: #fff;
  cursor: pointer;
  &:nth-child(2n) {
    background: #f6f8ff;
    // border-radius: 0px 0px 0px 0px;
  }
  &:hover {
    border: 1px solid rgba(22, 177, 58, 1);
  }
  &.active {
    background: #ddecff;
    border: 1px solid rgba(22, 177, 58, 1);
    &::after {
      content: '';
      width: 9px;
      height: 9px;
      border-top: 1px solid rgba(22, 177, 58, 1);
      border-right: 1px solid rgba(22, 177, 58, 1);
      position: absolute;
      right: -5px;
      top: 42%;
      transform: rotate(45deg);
      background-color: #ddecff;
    }
  }
}

.time-league {
  flex: 1.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    left: 50px;
    width: 4px;
    height: 32px;
    background: #e95d5d;
    border-radius: 2px 2px 2px 2px;
    top: 50%;
    margin-top: -16px;
  }
  .select {
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -9px;
    cursor: pointer;
    img {
      width: 18px;
      height: 18px;
    }
    .default {
      display: none;
    }
    .active {
      display: inline;
    }
  }
}
.league-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 20px;
}
.time {
  color: #6c757d;
}

.league {
  color: #6c757d;
  width: 60px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}

.progress {
  flex: 0.5;
  color: #afb8cb;

  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  img {
    width: 2px;
  }
}
.progress-red {
  color: #ff4343;
}

.teams {
  flex: 2;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  position: relative;
}

.team {
  display: flex;
  // justify-content: center;
  align-items: center;
  //   padding-right: 50px; /* 给 cards 留出空间 */
}

.team-name {
  // flex: 1;
  text-align: left;
  padding-left: 25px;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 170px;
  .home_icon {
    position: absolute;
    left: 0px;
    padding: 0px 4px;
    color: #fff;
    background: #16b13a;
    border-radius: 20px;
    font-size: 10px;
    font-style: normal;
  }
  //   padding-left: 10px;
}

.cards {
  position: absolute;
  right: 10px;
  display: flex;
  gap: 5px;
}

.yellow-card {
  color: #fff;
  width: 15px;
  height: 15px;
  background: #ffbf60;
  border-radius: 2px 2px 2px 2px;
  text-align: center;
  line-height: 15px;
}

.red-card {
  color: #fff;
  background-color: #ff5d5d;
  width: 15px;
  height: 15px;
  // background: #ffbf60;
  border-radius: 2px 2px 2px 2px;
  text-align: center;
  line-height: 15px;
}

.full-score,
.half-score,
.corner {
  flex: 0.4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.item-full-score {
  color: #ff4343;
  font-weight: bold;
  font-size: 14px;
}
.item-full-score-not {
  color: #20242d;
  font-weight: bold;
  font-size: 14px;
}
.betting-info {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.index,
.odds {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.index span,
.odds span {
  color: #6c757d;
}

.odds span.up {
  color: red;
}

.odds span.down {
  color: green;
}

.icons {
  flex: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .avatar {
    border-radius: 50%;
  }
}

.icons img {
  width: 20px;
  height: 20px;
  margin: 0 2px;
  cursor: pointer;
}

.favorite {
  flex: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.favorite img {
  width: 20px;
  height: 20px;
}

.group-header {
  padding: 15px 15px;
  background-color: #fff;
  // font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  color: #20242d;
  font-size: 12px;
}
</style>
